<template>
  <div class="dt-select-person">
    <div v-if="tagVisible" class="" style="display: flex">
      <div class="select-person-click" style="" @click="handleSelectPerson()">
        <div>
          <el-tag v-for="(tag, index) in currentMultipleSelectPersonData" :key="index" :closable="false"
                  type="info" @close="closeTag(tag)">
            {{ tag.roleName || "" }}
          </el-tag>
          <span v-if="!currentMultipleSelectPersonData.length" class="plactext">请选择角色</span>
        </div>
      </div>
      <!-- <el-button type="primary" size="mini" @click="handleSelectPerson">选择人员</el-button> -->
    </div>
    <!-- 选人弹框 -->
    <dt-dialog :title="title" :append-to-body="true" :visible.sync="open"
               :width="'880px'" @closeDialog="cancel" @comfirmBtn="submitForm">
      <div slot="content" class="dt-select-person-body">
        <el-row>
          <!-- 主内容 -->
          <el-col :span="18" :xs="24" style="padding-left: 0px">
            <div class="none2-border3 userlist mainbox">
              <el-input v-model="filterForm.roleName" size="small" clearable
                        placeholder="请输入角色名称搜索" prefix-icon="el-icon-search" @blur="searchUser"
                        @keyup.enter.native="searchUser" />
              <div class="table-box">
                <el-table
                  ref="table"
                  v-loading="loading"
                  header-row-class-name="headerClass"
                  row-class-name="rowClass"
                  :stripe="false"
                  :data="tableData"
                  style="width: 100%"
                  :row-key="'roleId'"
                  height="100%"
                  @row-click="setCurrent"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" reserve-selection width="55"
                                   :selectable="selectEnable" />
                  <el-table-column prop="roleCode" label="角色编码" show-overflow-tooltip
                                   width="180" />
                  <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip
                                   width="180" />
                  <el-table-column prop="roleType" show-overflow-tooltip label="角色类型">
                    <template slot-scope="scope">
                      <dt-dict-tag :options="dict.type.roleType" :value="scope.row.roleType" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="followAppName" show-overflow-tooltip label="业务应用" />
                </el-table>
              </div>
              <div class="pagination-box">
                <dt-pagination :total="total" :page="filterForm.pageNo" :limit="10"
                               @pagination="handlePageNation" />
              </div>
            </div>
          </el-col>
          <!-- 树结构 -->
          <el-col :span="6" :xs="24">
            <div class="mainbox-left mainbox-right">
              <div class="box-card" style="padding: 0">
                <div>
                  <div class="num">
                    <span>已选中：{{ multipleSelectionChangeData.length }}项</span>
                    <span class="clearSpan" @click="handleClear">清空</span>
                  </div>
                  <div class="app_type_list">
                    <div v-for="(item, index) in multipleSelectionChangeData" :key="index" class="already">
                      {{ item.roleName
                      }}<span class="cancle"><i class="el-icon-close el-icon--right" @click="handleCheckedChange(item)" /></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </dt-dialog>
  </div>
</template>

<script>
import roleApi from '@/framework/api/addRole'

export default {
  name: 'DtSelectRole',
  dicts: ['roleType'],
  props: {
    // 接口所需参数
    columnProps: {
      type: Object,
      default: () => {
        return {
          userId: '', // 必传
          roleName: '',
          pageNo: 1,
          pageSize: 10
        }
      }
    },
    // 接口对象
    api: {
      type: Object,
      default: () => {
        return roleApi
      }
    },
    // 标题
    title: {
      default: '新增角色',
      type: String
    },
    // 是否显示选中标签
    tagVisible: {
      type: Boolean,
      default: false
    },
    // 值
    value: {
      // 选中roleIds字符串 '1,2,3'
      type: String,
      default: ''
    },
    // 选中数据数组
    selectData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      total: 0,
      filterForm: {
        roleName: '',
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      open: false,
      multipleSelectionChangeData: [], // 多选选中数据
      currentMultipleSelectPersonData: [], // 实际使用多选选中人员数据
      tableData: []
    }
  },
  computed: {
    selectId() {
      return this.selectData.map((item) => item.roleId)
    }
  },
  created() {},
  methods: {
    setSelectable(row) {
      return this.selectId.includes(row.roleId)
    },
    setCurrent(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    handlePageNation(info) {
      this.filterForm.pageNo = info.page
      this.filterForm.pageSize = info.limit
      this.getList()
    },
    selectEnable(row, rowIndex) {
      return !row.checked
    },
    handleClear() {
      this.multipleSelectionChangeData.forEach((item) => {
        this.$refs.table.toggleRowSelection(item, false)
      })
      this.multipleSelectionChangeData = []
    },
    searchUser() {
      this.getList()
    },
    // 打开弹窗
    async handleSelectPerson() {
      this.open = true
      await this.getList()
      // this.$nextTick((res) => {
      //   setTimeout(() => {
      //     this.dealSelectPerson()
      //   }, 500)
      // })
    },
    // 回显多选选中数据
    dealSelectPerson() {
      this.selectData.forEach((row) => {
        this.$refs.table.toggleRowSelection(
          this.tableData.find((item) => {
            return row.roleId === item.roleId
          }),
          true
        )
      })
      this.currentMultipleSelectPersonData = this.multipleSelectionChangeData
    },
    // 获取页面列表
    getList() {
      this.loading = true
      this.columnProps.roleName = this.filterForm.roleName
      this.columnProps.pageNo = this.filterForm.pageNo
      this.columnProps.pageSize = this.filterForm.pageSize
      this.api.userRoleList(this.columnProps).then((res) => {
        this.tableData = res.data.rows
        this.tableData.forEach((item) => {
          if (item.checked) {
            this.$refs.table.toggleRowSelection(item, true)
          }
        })
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    // 删除选中
    closeTag(tag) {
      this.currentMultipleSelectPersonData =
                this.currentMultipleSelectPersonData.filter(
                  (item) => item.roleId !== tag.roleId
                )
      this.dealParentPersonData()
    },
    /** 保存选中 */
    submitForm() {
      this.dealSubmitData()
      this.$refs.table.clearSelection()
      this.open = false
    },
    /**
         * 处理提交数据
         */
    dealSubmitData() {
      this.currentMultipleSelectPersonData = JSON.parse(
        JSON.stringify(this.multipleSelectionChangeData)
      )
      this.dealParentPersonData()
    },
    /**
         * 处理父组件人数据
         */
    dealParentPersonData() {
      const persons = this.currentMultipleSelectPersonData
        .map((res) => res.roleId)
        .join(',')
      this.$emit('input', persons)
      this.$emit('update:selectData', this.currentMultipleSelectPersonData)
    },
    // 关闭弹框回调
    cancel() {
      this.currentMultipleSelectPersonData = []
      this.multipleSelectionChangeData = []
      this.$refs.table.clearSelection()
    },
    // 多选
    handleSelectionChange(val) {
      const arr = val.filter((item) => item.checked !== true)
      this.multipleSelectionChangeData = arr
    },
    // 删减人员
    handleCheckedChange(val) {
      this.multipleSelectionChangeData =
                this.multipleSelectionChangeData.filter(
                  (item) => item.roleId !== val.roleId
                )
      const deleteList = this.tableData.filter((item) => {
        return item.roleId === val.roleId
      })
      this.$refs.table.toggleRowSelection(
        deleteList.length ? deleteList[0] : val,
        false
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dt-select-person {
    .select-person-click {
        border: 1px #c0c4cc solid;
        border-radius: 5px;
        cursor: pointer;
        // min-height:40px;
        width: 100%;
        height: 100%;
        padding: 0px 8px 0 8px;
        // line-height: 28px;
        margin: auto;
        min-height: 36px;
        line-height: 36px;
        min-width: 200px;

        >div {
            margin: auto;
        }

        .el-tag {
            margin-right: 5px;
            margin-bottom: 4px;
        }
    }

    .isDisabled {
        background-color: #f5f7fa !important;
        border-color: #e4e7ed !important;
        color: #c0c4cc !important;
        cursor: not-allowed !important;
    }

    .plactext {
        color: #dcdfe6;
    }
}

::v-deep .el-dialog__header {
    padding-bottom: 5px !important;
}

::v-deep .dt-select-person-body {
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: solid 1px #dcdfe6;
    margin-top: 10px;

    >.el-row {
        display: flex;
        flex: 1;
        flex-wrap: wrap;

        >.el-col {
            .mainbox-left {
                height: 100%;
                display: flex;
                flex-direction: column;

                flex: 1;
                border-radius: 5px;

                // background: #f8f9fa;
                >.box-card {
                    height: 100%;
                    min-height: 400px;
                    // border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    //padding: 16px;
                    margin: 12px;
                    margin-right: 0;
                    // margin-right: 2px;
                    background: #fff;
                    // box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.04),
                    //   0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
                    border-left: solid 1px #dcdfe6;

                    .el-table {
                        flex: 1;
                    }

                }

                .already {
                    display: flex;
                    align-items: center;
                    margin: 14px 0 0 0px;
                    cursor: pointer;
                    justify-content: space-between;
                    color: #131414;
                }

                .already:hover {
                    color: var(--themeColor);
                }

                .num {
                    color: #131414;
                    // margin-left: 14px;
                    // margin-bottom: 16px;
                    border-bottom: solid 1px #dcdfe6;
                    padding: 0 12px 12px 12px;

                    .clearSpan {
                        float: right;
                        color: var(--themeColor);
                        cursor: pointer;
                    }
                }

                .app_type_list {
                    height: 492px;
                    overflow: auto;
                    padding: 0 8px;
                }
            }

            .mainbox-left {
                .box-card {
                    margin-left: 0;
                }
            }
        }
    }

    .mainbox {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        // max-height: calc(100vh - 100px);
        // background: #fff;
        border-radius: 5px;
        padding: 12px;
        // padding-left: 0px;
        // background: #f8f9fa;

        //搜索区域
        .el-table__header-wrapper{
          border: none;
        }
        .filter-container {
            background: #fff;
            border-radius: 4px;
            margin-bottom: 16px;
            padding: 20px 16px;
            padding-bottom: 0;
            display: flex;
            justify-content: flex-start;
            box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.04),
                0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
            flex-wrap: wrap;

            .filter-item {
                display: inline-block;
                vertical-align: middle;
                // margin-left: 10px;
            }

            .el-form {
                .el-form-item {
                    // margin-bottom: 0;
                }
            }

            .el-button {
                align-self: flex-start;
                margin-bottom: 16px;
            }
        }

        //表格区域
        .table-container {
            display: flex;
            border-radius: 4px;
            flex-direction: column;
            background: #fff;
            padding: 16px;
            flex: 1;
            box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.04),
                0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);

            //表格操作区域
            .table-opt-container {
                display: flex;
                align-items: center;
                margin-bottom: 8px;

                .el-button {
                    margin-bottom: 8px;
                }
            }

            .el-table {
                flex: 1;

                .cell {
                    padding-left: 16px !important;
                    padding-right: 16px !important;
                }
            }
        }

        .demo-form-inline {
            display: flex;
            justify-content: flex-end;
        }

        .el-table {
            // min-height: calc(100vh - 270px);
            // max-height: calc(100vh - 270px);
            // overflow: scroll;
        }
    }

    .table-box {
        margin-top: 16px;
        height: 429px;
        .headerClass{
          //background-color: #F2F6FC;
          height: 32px;
          border: none;
        }
        .el-table--medium td, .el-table--medium th {
            padding: 8px 0;
            border: none;
        }

        .el-table--medium th{
          background-color: rgb(242, 242, 242);
        }

    }
}
::v-deep .el-table__body-wrapper{
      border-right: 0;
  }
</style><style lang="scss">
.el-form-item.is-error .dt-select-person .el-input__inner {
    border-color: #dcdfe6;
}

.is-error {
    .dt-select-person {
        .select-person-click {
            border-color: #f56c6c !important;
        }
    }
}

::-webkit-scrollbar {
    width: 4px;
}
</style>
